<template>
  <div>
      <topnav :title="this.$route.query.id + '级团队'"></topnav>
       <div class="top">
           <img src="../../assets/user/team_banner.png" alt="">
       </div>
        <div class="list">
            <li v-for="(item,index) in teams" :key="index">
                <img :src="item.head_img" alt="">
                <p>{{item.nickname}}</p>
            </li>          
        </div>
  </div>
</template>

<script>
import topnav from "../../components/topNav"
import api from "../../axios/api"
export default {
    data(){
        return{
            teams:[],
        }
    },
    mounted(){
         this.id = localStorage.getItem("id");
         this.group()
    },
    methods:{
        group(){
            let type = this.$route.query.id
           let data = {
                parent_id:this.id,
                type:type,
           }
           this.$post(api.group,data).then(res=>{
        if(res.code == 0){
           this.teams = res.data
           console.log(this.teams)
        }else{
            this.$toast(res.error)
        }
    })   
        }  
    },
    components:{
        topnav
    }
}
</script>

<style lang="less" scoped>
.space{
    height: 8px;
    background-color: #f6f6f6;
}
.top {
    margin-top: 10px;
    img{
        width: 100%;
        height: 60px;
        background-size: 100%;
    }
}
.list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    li{
        width: 33.3%;
        height: 100px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
        margin-top: 10px;
        img{
            width: 70px;
            height: 70px;
            background-size: 100%;
            border-radius: 50%;
        }
        p{
            width: 100%;
        }
    }
}
</style>